<template>
 
  <i v-if='iconClass' :class="svgClass">
  </i>
</template>

<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  data:{
    classObj:{

    }
  },
  computed: {
    iconName() {
      return `icon-${this.iconClass}`
    },
    svgClass() {
      if (this.iconClass) {
        return 'iconfont icon-'+this.iconClass
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.el-menu{
  i{
    color: #fff;
  }
  .iconfont{
    color:#fff;
    font-size: 16px;
    margin:0 12px 0 10px
  }
}
.hideSidebar{
  .el-menu{
    .iconfont{
      margin-left:0;
    }
  }
  
}
</style>
